<template>
  <div>
    <div class="huge ">
      <span class="fa fa-plus pointer primary" @click="add" />
    </div>
    <template v-for="item in items">
      <el-row :gutter="5" style="margin:10px 0;" :class="className()">
        <el-col :span="2" style="width: 50px;">
          <span
            class=" fa fa-minus pointer danger bigger huge mr5"
            @click="minus(item)"
          />
          <span
            class=" fa fa-long-arrow-up primary big ml5"
            @click="up(item)"
          ></span>
          <span
            class=" fa fa-long-arrow-down primary big ml5"
            @click="down(item)"
          ></span>
        </el-col>
        <template v-for="(f, index) in field.fields">
          <el-col :span="size(f, field.fields)">
            <template v-if="f.type == 'select' || f.type == 'multiselect'">
              <template
                v-if="$store.state.edit.entry.sources[sourceKey(f, item)]"
              >
                <el-select
                  size="mini"
                  v-model="item[f.field]"
                  filterable
                  clearable
                  :placeholder="m(f.caption)"
                  @change="sourceChange(f, item)"
                  :multiple="f.type == 'multiselect'"
                >
                  <el-option
                    v-for="k in Object.keys(
                      $store.state.edit.entry.sources[sourceKey(f, item)]
                    )"
                    :key="k"
                    :label="
                      m($store.state.edit.entry.sources[sourceKey(f, item)][k])
                    "
                    :value="k"
                  >
                  </el-option>
                </el-select>
              </template>
            </template>
            <template v-else-if="f.type == 'dynamic'">
              <v-dynamic-field :field="f" :data="item" :inner="true" />
            </template>
            <template v-else-if="f.type == 'switch'">
              <el-switch
                size="mini"
                v-model="item[f.field]"
                :active-text="f['active-text'] ? m(f['active-text']) : '是'"
                :inactive-text="
                  f['inactive-text'] ? m(f['inactive-text']) : '否'
                "
                @change="$store.state.edit.dataChanged = true"
              >
              </el-switch>
            </template>
            <template v-else>
              <el-input
                size="mini"
                @change="$store.state.edit.dataChanged = true"
                auto-complete="off"
                v-model="item[f.field]"
                :placeholder="m(f.caption)"
              >
              </el-input>
            </template>
          </el-col>
        </template>
      </el-row>
    </template>
  </div>
</template>

<script>
import { m } from "@/store/yg/common/local";
import Vue from "vue";

export default {
  name: "v-dynamic-field",
  props: ["data", "field", "inner"],
  data() {
    return {
      items: []
    };
  },
  methods: {
    size(field, fields) {
      var length = fields.length;
      var hasDynamic = false;
      for (var i = 0; i < this.field.fields.length; i++) {
        var f = this.field.fields[i];
        if (f.type == "dynamic") {
          hasDynamic = true;
          break;
        }
      }
      if (field.type == "dynamic") {
        return 22 - 3 * (length - 1);
      }
      if (hasDynamic) {
        return 3;
      }
      return 22 / length;
    },
    className() {
      // if (this.inner) {
      return "";
      // }
      // return "wall";
    },
    colSize(type, length) {
      if (length <= 2) {
        return type == "dynamic" ? 6 : 4;
      }
      if (length <= 3) {
        return type == "dynamic" ? 5 : type == "text" ? 2 : 4;
      }
      if (length <= 4) {
        return type == "text" ? 2 : 3;
      }
      return 2;
    },
    add() {
      var item = {};
      this.items.push(item);
    },
    minus(item) {
      var index = this.items.indexOf(item);
      if (index > -1) {
        this.items.splice(index, 1);
      }
    },
    up(item) {
      var index = this.items.indexOf(item);
      if (index == 0) {
        return;
      }
      var newItems = [];
      if (index - 1 > 0) {
        newItems = this.items.slice(0, index - 1);
      }
      newItems = newItems.concat(item);
      newItems = newItems.concat(this.items.slice(index - 1, index));
      if (index + 1 < this.items.length) {
        newItems = newItems.concat(this.items.slice(index + 1));
      }

      this.items = newItems;
    },
    down(item) {
      var index = this.items.indexOf(item);
      if (index + 1 == this.items.length) {
        return;
      }
      var newItems = [];
      newItems = this.items.slice(0, index);
      if (index + 1 < this.items.length) {
        newItems = newItems.concat(this.items.slice(index + 1, index + 2));
      }
      newItems = newItems.concat(item);
      if (index + 2 < this.items.length) {
        newItems = newItems.concat(this.items.slice(index + 2));
      }
      this.items = newItems;
    },
    m(k) {
      return m(k, true);
    },
    callbefore() {
      this.data[this.field.field] = JSON.stringify(this.items);
    },
    sourceKey(row, item) {
      var key =
        row.source + (row.arg ? this.$store.state.edit.row[row.arg] : "");
      if (row.dependency) {
        key +=
          " " +
          (item[row.dependency]
            ? item[row.dependency]
            : this.data[row.dependency]);
      }

      return key;
    },
    sourceChange(row, item) {
      this.$store.state.edit.dataChanged = true;
      if (this.$store.state.edit.entry.dependencies[row.field]) {
        for (let f in this.$store.state.edit.entry.dependencies[row.field]) {
          Vue.set(item, f, "");
          this.loadSource(row.field, f, item);
        }
      }
    },
    loadSource(dependency, field, item) {
      var bean = this.$store.state.edit.entry.dependencies[dependency][field];
      var arg = item[dependency];
      this.$store.dispatch("loadEditOptionSource", { bean: bean, arg: arg });
    }
  },
  mounted() {
    if (!this.data) {
      this.data = {};
    }
    if (this.data[this.field.field]) {
      this.items = JSON.parse(this.data[this.field.field]);
    } else {
      this.items = [];
      if (!this.inner) {
        this.add();
      }
    }

    if (this.$store.state.edit.entry.dependencies) {
      var fields = this.field.fields;
      for (var j in this.items) {
        var item = this.items[j];
        for (var i in fields) {
          var f = fields[i].field;
          if (this.$store.state.edit.entry.dependencies[f] && item[f]) {
            for (let fi in this.$store.state.edit.entry.dependencies[f]) {
              this.loadSource(f, fi, item);
            }
          }
        }
      }
    }

    this.$store.dispatch("switchColor", this.$store.state.auth.user.color);
  }
};
</script>

<style>
.wall {
  padding: 10px;
  border: #409eff solid 1px;
}
</style>

<style scoped>
.huge {
  font-size: 18px;
}
</style>
